<template>
  <view class="search">
    <view v-if="!input"
          class="flex-box flex-box-v-center searchCon"
          @tap="boxClick">
      <view class="icon">
        <image src="/static/static/image/search.png"></image>
      </view>
      <view class="text flex-item-1 font_s_28 font_c_8e">{{placeholder}}</view>
      <view class="icon"
            v-if="camera">
        <image src="/static/static/image/camera.png"></image>
      </view>
    </view>
    <view v-else>
      <view class="flex-box flex-box-v-center">
        <view class="flex-box flex-item-1 flex-box-v-center searchCon">
          <view class="icon">
            <image src="/static/static/image/search.png"></image>
          </view>
          <view class="text flex-item-1 font_s_28 font_c_8e">
            <input @input="bindKeyInput"
                   :value="value"
                   type="text"
                   :placeholder="placeholder"></input>
          </view>
          <view class="icon"
                v-if="camera">
            <image src="/static/static/image/camera.png"></image>
          </view>
        </view>
        <view @tap="confirmSearch"
              class="confirmSearch font_s_30 font_c_8e">搜索</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },

  components: {},
  props: {
    input: {
      type: Boolean,
      default: false
    },
    camera: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  methods: {
    bindKeyInput(event) {
      this.value = event.detail.value
    },

    boxClick() {
      this.$emit('boxClick')
    },

    confirmSearch() {
      this.$emit('confirmSearch', {
        value: this.value
      })
    }
  }
}
</script>
<style>
@import './y-search.css';
</style>